<template>
  <div class="login">
    <img class="login-img" src="../../src/assets/login.svg" alt="" />
    <div class="login-card">
      <van-form @submit="onSubmit">
        <h1>登录</h1>
        <van-field
          v-model="form.username"
          name="用户名"
          left-icon="manager-o"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          left-icon="eye-o"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />

        <div style="margin: 30px 0">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { showSuccessToast } from 'vant';
const router=useRouter()
const store=useStore()
const form=reactive({
    username:"",
    password:''
})
const onSubmit = (values) => {
    store
      .dispatch("userAbout/login", form)
      .then((res) => {
        router.push("/");
        showSuccessToast("登录成功");
      })
      .finally(() => {

      });
};
</script>

<style lang="less" scoped>
h1 {
  padding: 0;
  font-size: 30px;
  margin-top: 0;
  margin-bottom: 50px !important;
}
.login {
  background-image: linear-gradient(
    to top,
    rgb(255, 255, 255) 0%,
    #006aff 100%
  );
  background-position: 100% 40vh;
  height: 100vh;
  width: 100vw;
  display: flex;
  overflow: hidden;
  align-items: end;
  position: relative;
  .login-img {
    width: 100vw;
    height: 30vh;
    position: absolute;
    top: 0;
  }
  .login-card {
    display: flex;
    align-items: start;
    justify-content: center;
    background-color: white;
    border-radius: 30px 30px 0 0;
    width: 100%;
    height: 75vh;
    box-shadow: rgba(18, 18, 18, 0.2) 0px 7px 29px 0px;
    .van-form {
      padding-top: 50px;
      .van-cell {
        background-color: #f0f0f0;
        width: 80vw;
        border-radius: 15px;
        margin-top: 20px !important;
      }
    }
  }
}
</style>